/* 
由于这个改过node_modules 中 vue-piczoom ---》 node_modules 》 vue-piczoom 》 src 》 components 》 PicZoom.vue中的代码
修改如下:
找到这行代码
document.body.append(this.canvas)
替换成
document.getElementsByClassName('pic-box')[0].appendChild(this.canvas)
*/  
<template>
  <div class="magnifier__box">
    <div class="magnifier__box--img pic-box" id="pic-box">
      <pic-zoom :url="url[imgIsShowIndex]" :scale="scale"></pic-zoom>
    </div>
    <ol v-if="url.length > 1">
      <li v-for="(item,index) in url" :key="item + index">
        <img :style="{ opacity : index === imgIsShowIndex ? activeColor : ''}" :src="item" @click="handleClickMinImg(item,index)">
      </li>
    </ol>
  </div>
</template>

<script>
import PicZoom from 'vue-piczoom'
export default {
  name: "Magnifier",
  props: ["url","scale"],

  data() {
    return {
      imgSrc:'',
      imgIsShowIndex: 0,
      isShow: false,
      activeColor: 0.4,
    }
  },
  components: {
    PicZoom
  },

  methods: {
    handleClickMinImg(item,index){
      this.imgIsShowIndex = index;
    }
  },

}
</script>

<style lang="scss" scoped>
.magnifier__box{
  margin-left: 5px;
  width: 260px;
  &--img{
    width: 260px;
    height: 260px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  ol{
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    li{
      margin-right: 4px; 
      &:hover{
        cursor: pointer;
      }
    }
  }
}
</style>
